<template>
  <div class="ranking">
    <div class="title">
      <strong>奖牌榜</strong>
    </div>
    <div class="chinaRanking">
      <div class="content">
        <p>
          中国第<span style="color: red">{{ chinaData.ranking }}</span
          >名
        </p>
        <p style="font-size: 12px">2022年冬奥会奖牌榜</p>
      </div>
      <div class="metalData">
        <img src="../assets/images/金牌.png" alt="" />
        <span style="color: gold">{{ chinaData.gold }} </span>
        <img src="../assets/images/银牌.png" alt="" />
        <span style="color: silver">{{ chinaData.silver }} </span>
        <img src="../assets/images/铜牌.png" alt="" />
        <span style="color: chocolate">{{ chinaData.bronze }} </span>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" height="700">
      <el-table-column label="国家/地区" width="210">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <div class="order">{{ scope.row.ranking }}</div>
            <img :src="scope.row.flagUrl" alt="" style="height: 16px" />
            <span>{{ scope.row.country }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="金牌" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.gold }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="银牌" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.silver }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="铜牌" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.bronze }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="总计" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.total }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElButton, ElTable, ElTableColumn, ElTag } from "element-plus";
import { ref } from "@vue/reactivity";
import { onUpdated } from "@vue/runtime-core";
export default {
  components: {
    ElButton,
    ElTable,
    ElTableColumn,
    ElTag,
  },
  props: {
    tableData: {
      type: Array,
    },
  },
  setup(props) {
    let chinaData = ref({
      ranking: 5,
      flagUrl:
        "https://search-operate.cdn.bcebos.com/7dce3e5758a82e720ec1c7123d246616.png",
      gold: 7,
      silver: 4,
      bronze: 1,

      styleIndex: "--i: 4",
      total: 13,
    });
    // console.log(chinaData);
    onUpdated(() => {
      chinaData.value = props.tableData.find((item) => {
        return item.country == "中国";
      });
      console.log(chinaData);
    });
    // console.log(chinaData);
    return { chinaData };
  },
  // setup(props) {
  //   let chinaData = ref({});
  //   chinaData = props.tableData.find((item) => {
  //     return item.country == "中国";
  //   });

  //   return { chinaData };
  // },
};
</script>

<style  scoped>
.ranking {
  width: 700px;
  height: 700px;
  /* overflow: hidden; */
  /* background-color: lightblue; */
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: white;
  font-size: 21px;
  border-radius: 5px;
}
.chinaRanking {
  width: 100%;
  height: 60px;
  display: flex;

  background-color: white;
  margin: 5px 0;
  border-radius: 5px;
}
.content {
  line-height: 30px;
  margin-left: 20px;
}
.metalData {
  width: 400px;
  line-height: 60px;
  display: flex;
  justify-content: center;
}
.metalData img {
  height: 35px;
  margin: auto 0;
}
.metalData span {
  margin-right: 10px;
  font-size: 20px;
  /* color: gold; */
  /* color:silver;
  color: chocolate; */
}

.warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.order {
  width: 30px;
  text-align: center;
}
</style>